<template>
    <el-dialog v-model="dialogData.visible" :title="dialogData.title" center :show-close="false" width="60%" top="1vh" :close-on-click-modal="false">
        <div class="dialog-content">
            <el-space>
                <el-button size="default" type="primary" :icon="Plus" @click="openDialog('add')" class="mb-5">新增</el-button>
            </el-space>
            <el-table border :data="tableData.list">
                <el-table-column type="index" label="序号" align="center" width="80"/>
                <el-table-column prop="content" label="回复内容" align="center"/>
                <el-table-column prop="createdAt" label="创建时间" align="center"/>
                <el-table-column prop="updatedAt" label="更新时间" align="center"/>
                <el-table-column prop="action" label="操作" fixed="right" width="180px" align="center">
                    <template #default="scope">
                        <el-tooltip content="编辑" placement="top">
                            <el-button type="primary" :icon="Edit" circle plain @click="openDialog('update',scope.row)"/>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button type="danger" :icon="Delete" circle plain @click="onDelete(scope.row)"/>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogData.visible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <!--  回复新增编辑弹框 -->
    <dialog-reply-add-edit ref="dialog-reply-add-edit" @update="getList"></dialog-reply-add-edit>
</template>


<script setup>
import { nextTick, reactive, ref, useTemplateRef, onMounted } from 'vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import DialogReplyAddEdit from 'views/platform-user-suggest/dialog-reply-add-edit.vue'
import replyApi from 'api/model/reply.js'

const dialogReplyAddEditRef = useTemplateRef('dialog-reply-add-edit')
defineExpose({ openDialog })

const dialogData = reactive({
    title: '回复列表',
    visible: false,
    item: {},
})

/**
 * 打开弹框
 * @param type
 * @param item
 */
function openDialog (type, item) {
    if (type === 'reply') {
        // 打开本页面的弹框
        dialogData.visible = true
        dialogData.item = item
        getList()
    }

    if (type === 'add' || type === 'update') {
        // 打开新增的弹框
        dialogReplyAddEditRef.value.openDialog(type, { ...item, suggestId: dialogData.item.id })
    }
}

const tableData = reactive({
    list: [],
})

/**
 * 获取回复列表
 */
async function getList () {
    const { code, data } = await replyApi.list.get({
        suggestId: dialogData.item.id
    })
    if (code === 200) {
        tableData.list = data
    } else {
        tableData.list = []
    }
}

/**
 * 删除操作
 * @param item
 */
function onDelete (item) {
    // 二次确认
    ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        deleteItem(item)
    }).catch(() => {
        ElMessage.info('取消删除')
    })
}

/**
 * 删除操作
 */
async function deleteItem (item) {
    const { code, data = [] } = await replyApi.delete.post({
        id: item.id
    })
    if (code === 200) {
        getList()
        ElMessage.success('删除成功')
    }
}


</script>
